/*
 * @Author: Yejing
 * @Date: 2023-06-25 15:37:32
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-25 15:37:32
 * @Description: desc
 */
<template>
	<view class="coupon-card-container" @click="goNavigate">
		<!-- {{info}} -->
		<image style="width: 100%;height: 324rpx; border-radius: 32rpx; margin-bottom: 30rpx;" :src="info.imageSrc" mode=""></image>
		<view v-if="type !== 'notUsed'" class="blurred-background">
			<view class="coupon-des">
				{{type==='Used'?'USED COUPON':'EXPREID COUPON'}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "couponCard",
		props: {
			info: {
				default: () => ({}),
				type: Object
			},
			type: {
				default: 'notUsed',
				type: String
			}
		},
		data() {
			return {

			};
		},
		methods:{
			goNavigate(){
				this.$emit("goNavigate")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-card-container {
		position: relative;
		height: fit-content;
		&+.coupon-card-container{
			margin-bottom:20rpx ;
		}
		>image {
			display: block;
		}

		.blurred-background {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.28);
			background-blend-mode: normal;
			backdrop-filter: blur(2px);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 32rpx;

			.coupon-des {
				color: #fff;
				font-size: 45rpx;
				border: 4.5rpx solid rgba(255, 255, 255, 0.8);
				width: 428rpx;
				height: 126rpx;
				line-height: 126rpx;
				text-align: center;
				position: relative;
				border-radius: 16rpx;
				&::after{
					position: absolute;
					content: '';
					left: 4rpx;
					top: 4rpx;
					width: calc(100% - 12rpx);
					height: calc(100% - 12rpx);
					border: 2rpx solid rgba(255, 255, 255, 0.8);
					border-radius: 11rpx;
				}
			}
		}

	}
</style>
